<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="box" class="one two three" title="hello" data-id="0" ></div>
</body>
<script>
    // 回流和重绘


    // 获取id名 class名 data-id自定义属性的值
    var box = document.getElementsByTagName("div")[0];

    // 1.  通过html属性(标签内可见的  => html属性)
    console.log(box.getAttribute("id"));
    console.log(box.getAttribute("class"));
    console.log(box.getAttribute("data-id"));


    // box.setAttribute("class","ONE TWO THREE");



    // 2. 元素节点的属性(元素节点 -> 对象 -> 存在修饰该元素的属性和方法)
    console.dir(box);
    console.log(box.id);
    console.log(box.className);
    console.log(box.dataset.id);




</script>
</html>